import React, { Component } from 'react';
import axios from 'axios';
import './login.css'

import { Form, Input, Button, Checkbox } from 'antd';


interface IState {
    img: string,
    password : string,
    username :string,
    verify : string,
    uuid : string,
    // GetVerify : ()=> any
    abc : ()=> any
}

interface IProps {

    GitVerify : ()=> any
}



export default class Login extends Component<IState> {

    state = {
        img: '',
        username : '',
        password : '',
        verify : '',
        uuid : ''
    }

    layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };

        onFinish = (values: any) => {
            console.log('Success:', values);
            console.log(values.username);
            

            axios.post( '/dev-api/login' , {
                username : values.username,
                password : values.password,
                code : values.verify,
                key: "teacher",
                uuid : this.state.uuid
             }).then(val=>{
                 console.log(val);
                 
             })

        };
    
        onFinishFailed = (errorInfo: any) => {
            console.log('Failed:', errorInfo);
        };

        GetVerify = () =>{
            axios.get('/dev-api/captchaImage').then(val=>{
                console.log(val);
                this.setState({
                    img : val.data.img,
                    uuid : val.data.uuid
                })
            })
        }
    
        // abc = () =>{
        //     console.log(111);
            
        // }

    componentDidMount =() => {
        this.GetVerify();
    }

    render() {

        const { img } = this.state;
        return (
            <div className='Login'>

                {/* <img src={img} alt="" /> */}

                <div className="form">
                    <Form
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            label="账号"
                            name="username"
                            rules={[{ required: true, message: '账号' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '密码' }]}
                        >
                            <Input.Password />
                        </Form.Item>  

                        <div className="form_children">
                            <Form.Item
                                label="验证码"
                                name="verify"
                                rules={[{ required: true, message: '验证码' }]}
                            >
                                <Input />
                            </Form.Item>
                            <div onClick={ ()=>{this.GetVerify()}}>
                                <img src={`data:image/png;base64,${img}`} alt="" />
                            </div>
                            {

                            }
                        </div>  

                        <Form.Item >
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}

